// Handle layer tips
App.directive('edTips', ['$parse', function($parse) {
    return {
        restrict: 'EA',

        replace: true,
        
        transclude: true,

        template: '<div class="tips-container">'
            +'<div ng-transclude class="content" tabindex="-1">'
            +'</div>' 
            +'<i class="arrow top" style=""></i>' 
            +'<i class="arrow bottom" style=""></i>'
            +'<span id="bln-close" class="ico-close" title="关闭">'
            +'<i class="fa fa-close"></i>'
            +'</span>'
            +'</div>',

        link: function(scope, elem, attrs) {
            var optionName = attrs.edTips || 'tips';

            var option = AppUtil.jsonfy(attrs.options);
            
    		if(!scope[optionName]){
    			scope[optionName] = {};
    		}
    		angular.extend(scope[optionName], option);

            var _width = option.width || '400px';
            var _height = option.height || 'auto';
            var _direction = option.direction || 'right' ;
            
            var content = elem.find(".content").first();
            
        	var _style = content.attr("style") || "";
        	
            _style += ";width:"+_width+";height:"+_height+";";

        	content.attr("style",_style);
            
            //设置ID
            scope.layerName = optionName;

            var LyOptions = scope[optionName];

            if (!LyOptions) {
                scope[optionName] = LyOptions = {};
            }
            
            //显示
            LyOptions.show = function(event) {
        		var _close = elem.find("span[class=ico-close]").first();
        		//关闭按钮
        		_close.click(function(){
        			LyOptions.hide();
        		})

            	
                var _obj = null;
            	if(event.path) {
            		//原生JS的事件对象
                	_obj =event.path[0];
            	} else {
                    _obj = event.srcElement;
            	}

                var x = $(_obj).offset().left;
                var y = $(_obj).offset().top;
                var height = _obj.offsetHeight;
                var width = _obj.offsetWidth;
                var _showLeft = x+width+15;
                var _showTop = y-100;
                
                var top = elem.find(".top").first();
        		var bottom = elem.find(".bottom").first();
        		var _top_style = top.attr("style");
    			var _bottom_style = bottom.attr("style");
    		
        	
	        	if(_direction=="right") {
	        		_top_style +="top: 53.3333px;left: -9px; border-style: dashed solid dashed dashed; border-width: 10px 10px 10px 0px;";
	        		_bottom_style +="top: 53.3333px;left: -10px; border-style: dashed solid dashed dashed;  border-width: 10px 10px 10px 0px;";
	        	}else if(_direction=="left") {
	        		var __width = $(elem).width();
	        		_top_style +="top: 53.3333px;left: " + (__width - 1) + "px; border-style: dashed dashed dashed solid; border-width: 10px 0px 10px 10px;border-color:transparent transparent transparent rgb(250, 250, 250);";
	        		_bottom_style +="top: 53.3333px;left: " + __width + "px; border-style: dashed dashed dashed solid; border-width: 10px 0px 10px 10px;border-color:transparent transparent transparent rgb(136, 136, 136);";
	        		
	        		_showLeft = x - $(elem).width() - 10;
	        	}else if(_direction=="top") {
	        		var __width = $(elem).width();
	        		var __height = $(elem).height();
	        		_top_style +="top:" + (__height -1 ) + "px;left: " + (__width/2) + "px; border-style: solid dashed dashed dashed; border-width: 10px 10px 0px 10px;border-color:rgb(250, 250, 250) transparent transparent transparent;";
	        		_bottom_style +="top:" + __height + "px;left: " + (__width/2) + "px; border-style: solid dashed dashed dashed; border-width: 10px 10px 0px 10px;border-color:rgb(136, 136, 136) transparent transparent transparent;";
	        		
	        		var _showTop = y-$(elem).height()-50;
            		var _showLeft = x - ($(elem).width()/2);
	        	}else if(_direction=="bottom") {
	        		var __width = $(elem).width();
	        		_top_style +=";left: " + (__width - 1) + "px; border-style: dashed dashed dashed solid; border-width: 10px 0px 10px 10px;border-color:transparent transparent transparent rgb(250, 250, 250);";
	        		_bottom_style +=";left: " + __width + "px; border-style: dashed dashed dashed solid; border-width: 10px 0px 10px 10px;border-color:transparent transparent transparent rgb(136, 136, 136);";
	        	}
	        	
	        	top.attr("style",_top_style);
	        	bottom.attr("style",_bottom_style);

                $(elem).css('top',_showTop).css('left',_showLeft).show().hover(function() {
                    $("body").unbind("mousedown", LyOptions.onBodyDown);
                }, function() {
                	$("body").bind("mousedown", LyOptions.onBodyDown);
                });
                $("body").bind("mousedown", LyOptions.onBodyDown);
                $(window).trigger('resize');
            }
            // 隐藏
            LyOptions.hide = function() {
                $(elem).hide();
                $("body").unbind("mousedown", LyOptions.onBodyDown);
            }
            //移除事件
            LyOptions.onBodyDown = function(event) {
                if ($('.layui-layer-shade').length > 0 || $(event.target).parents('.layui-layer').length > 0) {
                    return;
                }
            	LyOptions.hide();
            }
        }
    }
}]);
